<script lang="ts">
import { defineComponent } from 'vue';
import Avatar from '@/assets/imgs/shop_page/comment/avatar.png'
import ReviewPicture from '@/assets/imgs/shop_page/comment/picture.png'


export default defineComponent({
  data() {
    return {
      filters: [
        { id: 1, name: '全部', count: 6654 },
        { id: 2, name: '最新', count: 0 },
        { id: 3, name: '好评', count: 6292 },
        { id: 4, name: '近期差评', count: 26 },
      ],
      selectedFilterId: null as number | null,
      reviews: [
        {
          userAvatar: Avatar,
          user: '3***0',
          subText: '服务 非常满意 商品 非常满意',
          date: '2024-10-12',
          service: '50分钟送达',
          mainContent: '无敌#【果切】自选双拼 约350g 阳光果切# 超大份水果 都很新鲜 好吃性价比高',
          highlightedItems: [
            '【果切】自选双拼 约350g 阳光果切',
            '【果切】随机拼 约250g 阳光果切',
            '【果切】自选双拼 约350g 阳光果切',
          ],
          images: [ReviewPicture],
          reply: '果果很纳闷，亲亲身上这么多优点不累吗?'
        },
      ]
    };
  },
  methods: {
    selectFilter(id: number) {
      this.selectedFilterId = id;
      // 可以添加根据筛选条件获取数据的逻辑，目前只是切换选中状态
    }
  }
});
</script>

<template>
  <div class="review-container">
    <!-- 顶部筛选栏 -->
    <div class="filter-bar">
      <span
        v-for="filter in filters"
        :key="filter.id"
        :class="{ 'active-filter': selectedFilterId === filter.id }"
        class="filter-item"
        @click="selectFilter(filter.id)"
      >
        {{filter.name}} ({{filter.count}})
      </span>
    </div>
    <!-- 评论列表 -->
    <div class="review-list">
      <div v-for="(review, index) in reviews" :key="index" class="review-item">
        <!-- 评论头部 -->
        <div class="review-header">
          <div class="user-avatar">
            <img :src="review.userAvatar">
          </div>
          <div class="user-info">
            <span class="user">{{review.user}}</span>
            <span class="sub-text">{{review.subText}}</span>
          </div>
          <div class="header-right">
            <span class="date">{{review.date}}</span>
            <span class="service">{{review.service}}</span>
          </div>
        </div>
        <!-- 评论内容 -->
        <div class="review-content">
          <p>{{review.mainContent}}</p>
          <div v-if="review.highlightedItems.length > 0" class="highlighted-items">
            <span v-for="(item, itemIndex) in review.highlightedItems" :key="itemIndex" class="highlighted-item">{{item}}</span>
          </div>
        </div>
        <!-- 评论图片 -->
        <div v-if="review.images.length > 0" class="review-images">
          <img :src="review.images[0]">
        </div>
        <!-- 商家回复 -->
        <div class="reply-section">
          <span class="reply-title">商家回复</span>
          <span class="reply-content">{{review.reply}}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss">

// 评论容器样式
.review-container {
  font-family: Arial, sans-serif;
  width: 100%;
  margin: 5px auto;
  padding: 0 10px;
}

// 筛选栏样式
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 10px;
 .filter-item {
    margin-right: 10px;
    padding: 5px 10px;
    border: 1px solid #ccc;
    border-radius: 3px;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }
 .active-filter {
    background-color: var(--op-primary-color);
    color: white;
  }
}

// 评论列表样式
.review-list {
 .review-item {
    padding: 0 10px;
    margin-bottom: 15px;
    .review-header {
        align-items: center;
        height: 40px;
        margin-bottom: 10px;
        padding-right: 10px;
      .user-avatar {
        float: left;
        width: 40px;
        height: 40px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .user-info {
        float: left;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        .user {
            font-size: 16px;
            font-weight: bold;
          }
        .sub-text {
            font-size: 14px;
            color: #666;
          }
        }
        .header-right {
          float: right;
          right: 10px;
          display: flex;
          flex-direction: column;
        }
      }
 .review-content {
      margin-bottom: 10px;
     .highlighted-items {
        margin-top: 5px;
       .highlighted-item {
          display: inline-block;
          background-color: #e0f2ff;
          border: 1px solid #90caf9;
          border-radius: 3px;
          padding: 3px 8px;
          margin: 3px;
          color: #1976d2;
          font-size: 14px;
        }
      }
    }
 .review-images {
      img {
        width: 200px;
        height: 200px;
      }
    }
 .reply-section {
      width: 350px;
      height: 50px;
      background: var(--op-gray-bg-color);
      padding: 10px 0 10px 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      align-items: baseline;
     .reply-title {
        font-weight: bold;
        margin-bottom: 10px;
      }
     .reply-content {
        font-size: 14px;
      }
    }
  }
}
</style>
